<template>
  <div class="home">
    <div class="home-header">
      智慧宿管云平台
    </div>
    <div class="home-button">
      <el-button type="danger" class="button-box">
        <i class="el-icon-s-flag"></i>
        <span>开闸</span>
      </el-button>
    </div>
    <div class="box-card">
      <van-cell-group v-for="item in listDorAttence" :key="item.id">
        <van-cell :title="item.roomName" :value="'宿舍总人数：'+item.total" />
        <van-cell title-class="cell">
          <template #default>
            <el-badge :value="item.normal" class="item" type="success">
              <el-button size="small">正常</el-button>
            </el-badge>
            <el-badge :value="item.leaveCount" class="item" type="primary">
              <el-button size="small">请假</el-button>
            </el-badge>
            <el-badge :value="item.comebacklate" class="item" type="warning">
              <el-button size="small">晚归</el-button>
            </el-badge>
            <el-badge :value="item.absence" class="item" type="danger">
              <el-button size="small">缺勤</el-button>
            </el-badge>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>

export default {
  name: 'home',
  data(){
    return{
      listDorAttence:[],
    }
  },
  created(){
    this.getListDorAttence();
  },
  methods:{
    async getListDorAttence(){
      var {data:res} =await this.$axios({
        url:this.$location.listDorAttence
      })
      this.listDorAttence=res.data
      console.log(this.listDorAttence)
    }
  }
}
</script>
<style lang="less" scoped>
.home{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../assets/home-header-bg.png") no-repeat;
    background-size: 100% 200px;
    overflow: auto;
}
.home-header{
    width: 100%;
    height: 100px;
    line-height: 100px;
    z-index: 999;
    position: fixed;
    left: 0;  
    top: 0;
    text-align: center;
    color: #fff;
    font-size: 22px;
}
.home-button{
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 150px;
    margin-bottom: 50px;
}
.button-box{
    padding: 35px 40px!important;
    background-color: red;
    color: #fff;
    font-size: 16px;
}
.row-bg{
  display: flex;
}
.van-cell{
  padding: 10px 14px !important;
}
.van-cell-group {
    width: 200px !important;
    float: left;
    line-height: 13px !important;
    border: 1px solid #ccc;
    margin: 10px 0px 0px 4px;
}
.box-card{
  font-style: 13px;
  float: left;
  margin: 5px;
    span{
      font-size: 13px;
      font-weight: 600;
      color: #606266;
    }
}
.el-badge {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    padding: 3px;
    margin-top: 13px;
    margin-left: 10px;
}
</style>
